<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="web前端个人简历,web前端,张小月简历，Redspite，前端个人博客，前端工程师">
    <meta name="description" content="张小月WEB前端工程师的个人简历">
    <meta name="author" content="张小月,Redspite">
    <title>Web前端工程师简历</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css" type="text/css">
    <link rel="stylesheet" href="css/cv.css">
    <!--[if lte IE 9]>
    <script type="text/javascript">
        window.location = "http://www.xiaoyuezhang.com/error.html"
    </script>
    <![endif]-->
</head>
<body>
<div class="content ">
    <div class="cv-container">
        <div id="section1" class="section active">
            <div id="top" title="顶部">
                <img src="image/top.png" alt="回到顶部">
            </div>
            <div class="myIntro">
                <h1 class="fade">Hello, I'm RedSpite</h1>
                <h3 class="fade">一个拥有像素眼的前端工程师</h3>
                <span class="active fade" id="abMe">关于我</span>
                <span id="mypro" class="fade">我的作品</span>
            </div>
            <ul class="bg-img">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div id="section2" class="section">
            <!-- 导航条-->
            <div id="nav-bar" class="bar">
                <div class="container">
                    <a href="drip.html"> <div class="fl">RedSpite博客</div></a>
                    <ul class="fr nav-ul">
                        <li>关于我</li>
                        <li>求职意向</li>
                        <li>作品集</li>
                        <li>技术掌握</li>
                        <li>我的经历</li>
                        <li>联系我</li>
                    </ul>
                    <div class="fr more-nav">
                        <img src="image/more.png" alt="更多">
                    </div>
                </div>
                <ul class="nav-ul nav-xs-ul">
                    <li>关于我</li>
                    <li>求职意向</li>
                    <li>作品集</li>
                    <li>技术掌握</li>
                    <li>我的经历</li>
                    <li>联系我</li>
                </ul>
            </div>

            <!--关于我-->
            <h2>关于我</h2>
            <hr>
            <div class="center fades">
                <p class="center"><img src="image/mypic.jpg" alt="头像" /></p>
                <div class="my-intro">
                    <p>我叫张小月，23岁，坐标成都，是一名前端工程师。前端是一门有容乃大的行业，我并不是计算机专业出生。
                        在自学前端之前，唯一接触过的就是大学里的C语言。庆幸的是JS与C很相像，给我很大的信心来学习。今后的职业规划也是朝着JS发展，目前在学习Angular JS。</p>
                    <p>工作近一年，大的来说，写过响应式页面，移动端页面，pc端页面。小的来说，直播，商城，投票，视频，相册，地图，无缝轮播等都有涉及。
                        很感谢 <a href="http://www.cbecm.com" target="_blank">成都清风竞技文化传媒有限公司</a> 对我的培养，让我学到了很多东西。</p>
                </div>
            </div>
        </div>
        <div id="section3" class="section">
            <h2>求职意向</h2>
            <hr>
            <div class="container center fades">
                <div class="col-md-3 col-xs-6 skill-ps skill">
                    <p><img src="image/web.png" alt="切图"></p>
                    <p class="ptitle">PS切图</p>
                    <p>从PSD上切出页面需要的图片</p>
                    <p>将小图标合成spirts优化。</p>
                </div>
                <div class="col-md-3 col-xs-6 skill-web skill">
                    <p><img src="image/css.png" alt="css"></p>
                    <p class="ptitle">网页制作</p>
                    <p>响应式页面,简单不冗余代码。</p>
                    <p>css3流畅动画效果，兼容不同浏览器。</p>
                </div>
                <div class="col-md-3 col-xs-6 skill-js skill">
                    <p><img src="image/js.png" alt="js"></p>
                    <p class="ptitle">前端功能</p>
                    <p>用JS完成常见的前端功能特效</p>
                    <p>用AJAX读取后台数据。</p>
                </div>
                <div class="col-md-3 col-xs-6 skill-h5 skill">
                    <p><img src="image/h5.png" alt="h5"></p>
                    <p class="ptitle">h5页面</p>
                    <p>移动端页面的书写</p>
                    <p>兼容平板、安卓、IOS不同终端。</p>
                </div>
            </div>
        </div>
        <div id="section4" class="section">
            <h2>作品集</h2>
            <hr>
            <div class="container center fades">
                <p class="center intros">写jq前端功能的时候，我的宗旨是能手写就手写，不依赖插件。手写代码更简洁高效，也更能提升自己技术。</p>
                <div class="col-md-3 col-xs-6">
                    <div class="imgbox">
                        <img src="image/01.jpg" alt="作品配图">
                    </div>
                    <a href="cart.html" target="_blank">
                        <div class="zp-cover">
                            <h4>商城类页面</h4>
                            <p>购物车结算jq，订单的选择或删除、金额的计算。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="imgbox">
                        <img src="image/06.jpg" alt="作品配图">
                    </div>
                    <a href="http://www.cbecm.com/Analysis/Gametest/pc_test" target="_blank">
                        <div class="zp-cover" style="top: 45%">
                            <h4>测试类页面</h4>
                            <p>AJAX获取后台数据，用数组读取选项与题目。记录测试者的选项返给后台。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/02.jpg" alt="作品配图">
                    </div>
                    <a href="http://www.cbecm.com/Live/Index/index" target="_blank">
                        <div class="zp-cover">
                            <h4>直播类页面</h4>
                            <p>直播页面响应式，css3 jq运用较多</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/03.jpg" alt="作品配图">
                    </div>
                    <a href="http://www.cbecm.com/Anchor/Anchor/anchor" target="_blank">
                        <div class="zp-cover">
                            <h4>列表类页面</h4>
                            <p>无缝轮播手写，花瓣动画。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/04.jpg" alt="作品配图">
                    </div>
                    <a href="http://www.cbecm.com/Anchor/Anchor/anchor_detai?id=RjA4QzAyMzUtNERCNC04MjM1LUY2NTQtQUM2NTdGMkQ4OTcx" target="_blank">
                        <div class="zp-cover">
                            <h4>详情类页面</h4>
                            <p>视频播放，富文本编辑器手写。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/05.jpg" alt="作品配图">
                    </div>
                    <a href="http://www.cbecm.com/Home/Index/index" target="_blank">
                        <div class="zp-cover">
                            <h4>官网类首页</h4>
                            <p>多数据响应式网页，能兼容不同大小电脑分辨率</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>

                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/07.jpg" alt="作品配图">
                    </div>
                    <a href="http://www.cbecm.com/Live/Index/m_index" target="_blank">
                        <div class="zp-cover">
                            <h4>移动端页面</h4>
                            <p>列表页，兼容安卓、ios、平板</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="imgbox">
                        <img src="image/08.jpg" alt="作品配图">
                    </div>
                    <a href="drip.html" target="_blank">
                        <div class="zp-cover">
                            <h4>我的技术博客</h4>
                            <p>自己平时的知识点积累~</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div id="section5" class="section">
            <h2>技术掌握</h2>
            <hr>
            <div class="container center fades">
                <div class="col-md-3 col-xs-6">
                   <div class="wrap-box">
                       <div class="circle-wrap clip-auto">
                           <div class="left-clip percent"></div>
                           <div class="right-clip percent"></div>
                       </div>
                       <div class="circle-num">
                           <span>90</span>%
                       </div>
                   </div>
                    <p class="ptitle">HTML5</p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="wrap-box">
                        <div class="circle-wrap clip-auto">
                            <div class="left-clip percent"></div>
                            <div class="right-clip percent"></div>
                        </div>
                        <div class="circle-num">
                            <span>90</span>%
                        </div>
                    </div>
                    <p class="ptitle">CSS3</p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="wrap-box">
                        <div class="circle-wrap clip-auto">
                            <div class="left-clip percent"></div>
                            <div class="right-clip percent"></div>
                        </div>
                        <div class="circle-num">
                            <span>85</span>%
                        </div>
                    </div>
                    <p class="ptitle">JQ</p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="wrap-box">
                        <div class="circle-wrap clip-auto">
                            <div class="left-clip percent"></div>
                            <div class="right-clip percent"></div>
                        </div>
                        <div class="circle-num">
                            <span>80</span>%
                        </div>
                    </div>
                    <p class="ptitle">JS</p>
                </div>
            </div>
        </div>
        <div id="section6" class="section">
            <h2>我的经历</h2>
            <hr>
            <div class="container center fades">
                <ul class="my-xp">
                    <li>
                        <div class="date-box">
                           <p>09/2015</p>
                            <p>-</p>
                            <p>现在</p>
                        </div>
                        <div class="my-work my-xp-box">
                            <strong>成都清风竞技文化传媒</strong>
                            <p class="ptitle">技术部/前端工程师</p>
                            <p>负责官网页面制作。PSD切图后构建页面框架</p>
                            <p>利用JS、CSS3书写前端功能，让页面更充实丰富</p>
                            <p>并将代码上传到代码托管平台上</p>
                        </div>
                    </li>
                    <li>
                        <div class="date-box">
                            <p>06/2016</p>
                            <p>-</p>
                            <p>09/2012</p>
                        </div>
                        <div class="my-school my-xp-box">
                            <strong>西南科技大学</strong>
                            <p class="ptitle">大学本科</p>
                            <p>获得大学英语四级证书</p>
                            <p>获得C语言计算机二级</p>
                            <p></p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <div id="section7" class="section">
            <h2>联系我</h2>
            <hr>
            <div class="container center fades">
                <div class="flow">
                    <!-- UY BEGIN -->
                    <div id="uyan_frame" class="fl half"></div>
                    <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2110329"></script>
                    <!-- UY END -->
                    <div class="half fr">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p class="center beian">© RedSpite | <a href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action">蜀ICP备16004270号</a></p>

</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/mycv.js"></script>
<script>
    (function(){
        //百度自动链接推送
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

</body>
</html>